<script>
import comMixin from "./comMixin.js";
import FormDatePicker from "./datepicker.vue";
import { isEmpty, cloneDeep } from "lodash";
export default {
  mixins: [comMixin],
  props: {
    startTimeField: {
      type: String,
    },
    endTimeField: {
      type: String,
    },
    fulloption: {
      type: Boolean,
      default: false,
    },
    labelArr: {
      type: Array,
      default: () => [],
    },
    hasAll: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: "daterange",
    },
    before: {
      type: Number, // 日期可用范围 最近
      default: undefined,
    },
    limit: {
      type: Number, // 日期可用范围 最远
      default: undefined,
    },
    format: {
      type: String, // 返回的startTimeField，endTimeField 格式化
    },
    defaulQuery:{
      type: Boolean,
      default: false // 默认url中带有date参数时，赋值给这个组件
    }
  },
  data() {
    return {
      oldValue: "",
      value: "",
      datepickerShow: false,
    };
  },
  watch: {
    formData: {
      immediate: true,
      deep: true,
      handler() {
        if (isEmpty(this.formData) || !this.prop || !this.formData[this.prop])
          return;
        this.onSetValue(this.formData);
      },
    },
  },
  computed: {
    dicDataSync() {
      let labelArr = this.labelArr;
      if (labelArr.length == 0) {
        labelArr = !this.fulloption
          ? [
              $AONE_LAN.today,
              $AONE_LAN.yesterday,
              $AONE_LAN.thisWeek,
              $AONE_LAN.lastWeek,
              $AONE_LAN.thisMonth,
              $AONE_LAN.lastMonth,
              $AONE_LAN.otherTime,
            ]
          : [
              $AONE_LAN.today,
              $AONE_LAN.yesterday,
              $AONE_LAN.nearThreeDay,
              $AONE_LAN.nearSevenDay,
              $AONE_LAN.thisWeek,
              $AONE_LAN.lastWeek,
              $AONE_LAN.thisMonth,
              $AONE_LAN.lastMonth,
              $AONE_LAN.nearOneMonth,
              $AONE_LAN.nearTwoMonth,
              $AONE_LAN.nearThreeMonth,
              $AONE_LAN.all,
              $AONE_LAN.otherTime,
            ];
      }
      if (!this.hasAll) {
        labelArr = labelArr.filter((it) => it != $AONE_LAN.all);
      }
      return labelArr.map((label) => {
        return {
          label,
          value: label,
        };
      });
    },
    onlyDay() {
      return this.type == "daterange";
    },
  },
  methods: {
    onSelect(data, noClean) {
      if (data != $AONE_LAN.otherTime) {
        this.onClear({}, noClean);
        this.oldValue = data;
        this.$tool.defaultTime(
          this.formData,
          data,
          this.startTimeField,
          this.endTimeField,
          this.prop
        );
        this.$emit("formDataUpdate", this.formData);
      } else {
        this.value = this.oldValue;
        this.onClear({}, noClean);
        this.onSelect(this.value, true);
        this.datepickerShow = true;
        this.onShowDatepicker();
      }
    },
    onClear(resetFormData = {}, noClean) {
      this.oldValue = "";
      this.value = "";
      this.formData[this.startTimeField] = resetFormData[this.startTimeField];
      this.formData[this.endTimeField] = resetFormData[this.endTimeField];
      this.formData[this.prop] = resetFormData[this.prop] || 0;
      this.datepickerShow = false;
      if (!noClean) {
        this.$refs.formitem.onClearValue();
      }
      this.$emit("formDataUpdate", this.formData);
    },
    onReset(resetFormData = {}) {
      this.onClear(resetFormData);
      this.onSetValue(resetFormData, {
        noOtherTime: true,
      });
      this.$emit("formDataUpdate", this.formData);
    },
    onSetValue(formData, option = {}) {
      let isOne = false;
      this.dicDataSync.forEach((it) => {
        const objFormData = cloneDeep(formData);
        this.$tool.defaultTime(
          objFormData,
          it.label,
          this.startTimeField,
          this.endTimeField,
          this.prop
        );
        if (objFormData[this.prop] == formData[this.prop]) {
          if (!option.noOtherTime || formData[this.prop] != 0) {
            this.value = it.label;
            isOne = true;
            if (!this.oldValue) {
              this.oldValue = this.value;
            }
            return;
          }
        }
      });
      if (!isOne) {
        this.value = "";
      }
      this.onDateChange();
    },
    onDateChange() {
      if (
        this.formData[this.startTimeField] &&
        this.formData[this.endTimeField]
      ) {
        this.formData[this.prop] = 0;
        if (this.onlyDay) {
          this.value =
            dayjs(this.formData[this.startTimeField]).format("YYYY-MM-DD") +
            " 至 " +
            dayjs(this.formData[this.endTimeField]).format("YYYY-MM-DD");
        } else {
          this.value =
            dayjs(this.formData[this.startTimeField]).format(
              "YYYY-MM-DD HH:mm:ss"
            ) +
            " 至 " +
            dayjs(this.formData[this.endTimeField]).format(
              "YYYY-MM-DD HH:mm:ss"
            );
        }
      }
      this.oldValue = this.value;
      this.$emit("formDataUpdate", this.formData);
    },
    onShowDatepicker() {
      this.$refs.formitem.$refs.datepicker.focus();
      this.$refs.formselect.focus();
    },
    onCloseDatepicker() {
      setTimeout(() => {
        this.$refs.formitem.$refs.datepicker.blur();
        this.$refs.formselect.blur();
      }, 100);
    },
    onVisibleChange(bl) {
      if (bl) {
        this.datepickerShow = false;
      }
    },
  },
  render() {
    return (
      <div class="aoneui-select-wrapper">
        <el-select
          class={"aoneui-select"}
          ref="formselect"
          v-model={this.value}
          clearable={this.clearable}
          placeholder={this.placeholderSync}
          onChange={this.onSelect}
          onClear={this.onClear}
          on={{ "visible-change": this.onVisibleChange }}
        >
          {this.dicDataSync.map((item) => {
            return (
              <el-option
                key={item.value}
                label={item.label}
                value={item.value}
              ></el-option>
            );
          })}
        </el-select>
        <FormDatePicker
          class="aoneui-select-datepicker"
          v-show={this.datepickerShow}
          ref="formitem"
          {...{
            props: this.$props,
          }}
          appendToBody={false}
          onDateChange={this.onDateChange}
        />
      </div>
    );
  },
};
</script>
<style lang="scss" scoped>
.aoneui-select-wrapper {
  line-height: 0;
}
.aoneui-select-datepicker {
  height: 0 !important;
  padding: 0;
  border: 0;
  position: absolute;
  /deep/ {
    > .el-input__icon,
    > .el-range-input,
    > .el-range-separator {
      display: none;
    }
  }
}
</style>
